<template>
  <div class="search-service-page">
    <!-- 顶部标题栏 -->
    <div class="header">
      <div class="back-arrow" @click="handleBack">
        <van-icon name="arrow-left" />
      </div>
      <div class="title-section">
        <div class="main-title">搜索服务</div>
        <div class="sub-title">价格透明 | 服务保障</div>
      </div>
    </div>

    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="search-input">
        <van-field 
          v-model="searchValue" 
          placeholder="请输入搜索内容" 
          clearable
        />
      </div>
      <van-button type="primary" @click="handleSearch">搜索</van-button>
    </div>

    <!-- 排行榜列表区域 -->
    <div class="rankings-container">
      <div 
        v-for="(ranking, index) in rankings" 
        :key="index" 
        class="ranking-list"
      >
        <div class="ranking-header">
          <div>
            <div class="ranking-title">{{ ranking.title }}</div>
            <div class="ranking-subtitle">{{ ranking.subtitle }}</div>
          </div>
        </div>

        <div class="ranking-items">
          <div 
            v-for="(item, idx) in ranking.items" 
            :key="idx" 
            class="ranking-item"
          >
            <div 
              class="rank-number" 
              :class="{ top: idx < 3 }"
            >
              {{ idx + 1 }}
            </div>
            <div class="rank-content">
              <div class="rank-title">{{ item.title }}</div>
              <div class="rank-desc">{{ item.desc }}</div>
            </div>
            <div class="rank-value">{{ item.value }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { Field as VanField, Button as VanButton, Icon as VanIcon } from 'vant'
import router from '@/router'
import { findService } from '@/api'

// 搜索值
const searchValue = ref('')

// 排行榜数据
const rankings = ref([
  {
    title: '热门服务',
    subtitle: '用户搜索最多的服务',
    items: [
      { title: '家庭保洁', desc: '专业保洁服务', value: '¥98' },
      { title: '家电维修', desc: '快速上门维修', value: '¥128' },
      { title: '搬家服务', desc: '专业搬家团队', value: '¥298' },
      { title: '月嫂服务', desc: '专业母婴护理', value: '¥5800' },
      { title: '管道疏通', desc: '快速解决堵塞', value: '¥88' },
      { title: '空调清洗', desc: '深度清洁保养', value: '¥158' },
      { title: '宠物寄养', desc: '爱心宠物照顾', value: '¥68' },
      { title: '电脑维修', desc: '专业维修服务', value: '¥108' },
      { title: '法律咨询', desc: '专业法律解答', value: '¥200' }, 
      { title: '室内设计', desc: '个性化设计方案', value: '¥500' }
    ]
  },
  {
    title: '好评服务',
    subtitle: '用户评价最高的服务',
    items: [
      { title: '深度保洁', desc: '全屋深度清洁', value: '¥168' },
      { title: '家具安装', desc: '专业安装服务', value: '¥88' },
      { title: '除螨服务', desc: '专业除螨除菌', value: '¥198' },
      { title: '育儿嫂', desc: '专业育儿指导', value: '¥4500' },
      { title: '防水补漏', desc: '专业防水施工', value: '¥328' },
      { title: '家电清洗', desc: '深度清洗保养', value: '¥138' },
      { title: '宠物美容', desc: '专业宠物美容', value: '¥128' },
      { title: '手机维修', desc: '快速维修服务', value: '¥98' },
      { title: '财务咨询', desc: '专业财务规划', value: '¥300' },
      { title: '软装设计', desc: '个性化软装方案', value: '¥800' }
    ]
  },
  {
    title: '高性价比',
    subtitle: '价格实惠质量好',
    items: [
      { title: '日常保洁', desc: '日常清洁服务', value: '¥68' },
      { title: '灯具安装', desc: '专业灯具安装', value: '¥58' },
      { title: '除甲醛', desc: '专业甲醛治理', value: '¥398' },
      { title: '钟点工', desc: '灵活用工服务', value: '¥35/h' },
      { title: '电路维修', desc: '专业电路检修', value: '¥88' },
      { title: '洗衣机清洗', desc: '深度清洗保养', value: '¥118' },
      { title: '宠物训练', desc: '专业行为训练', value: '¥200' },
      { title: '数据恢复', desc: '专业数据恢复', value: '¥158' },
      { title: '心理咨询', desc: '专业心理疏导', value: '¥180' },
      { title: '庭院设计', desc: '个性化庭院设计', value: '¥1200' }
    ]
  },
  {
    title: '新上服务',
    subtitle: '最新上线的服务',
    items: [
      { title: '智能家居安装', desc: '智能设备安装调试', value: '¥158' },
      { title: '空气净化', desc: '专业空气净化服务', value: '¥228' },
      { title: '收纳整理', desc: '专业收纳规划', value: '¥168' },
      { title: '老人陪护', desc: '专业老人照护', value: '¥3800' },
      { title: '墙面刷新', desc: '专业墙面翻新', value: '¥28/m²' },
      { title: '地暖清洗', desc: '专业地暖清洗', value: '¥198' },
      { title: '宠物医疗', desc: '专业宠物医疗', value: '¥158' },
      { title: '网络维修', desc: '专业网络维护', value: '¥88' },
      { title: '职业规划', desc: '专业职业指导', value: '¥250' },
      { title: '商业空间设计', desc: '专业商业设计', value: '¥2000' }
    ]
  }
])
onMounted(()=>{
    getService
})

const getService = async () => {
  try {
    rankings.value[0] = await getPageService(0);
    rankings.value[1] = await getPageService(1);
    rankings.value[2] = await getPageService(2);
    rankings.value[3] = await getPageService(3);
    userStore.newType = ret
  } catch (e) {
    ElMessage({
      message: e,
      type: "error"
    })
  }
}

// 返回上一页
const handleBack = () => {
  console.log('返回上一页')
  router.go(-1)
}

// 搜索处理
const handleSearch = () => {
  console.log('搜索:', searchValue.value)
}
</script>

<style lang="scss" scoped>
.search-service-page {
  padding: 16px;
  background-color: #f7f8fa;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

  .header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .back-arrow {
      margin-right: 12px;
      font-size: 18px;
      cursor: pointer;
    }

    .title-section {
      flex: 1;

      .main-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 4px;
      }

      .sub-title {
        font-size: 12px;
        color: #969799;
      }
    }
  }

  .search-section {
    display: flex;
    margin-bottom: 20px;

    .search-input {
      flex: 1;
      margin-right: 12px;
    }
  }

  .rankings-container {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px;

    // 隐藏滚动条但保持滚动功能
    &::-webkit-scrollbar {
      display: none;
    }

    .ranking-list {
      display: inline-block;
      width: 280px;
      background: white;
      border-radius: 12px;
      padding: 16px;
      margin-right: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

      .ranking-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;

        .ranking-title {
          font-size: 16px;
          font-weight: 600;
        }

        .ranking-subtitle {
          font-size: 12px;
          color: #969799;
        }
      }

      .ranking-items {
        .ranking-item {
          display: flex;
          align-items: center;
          padding: 8px 0;
          border-bottom: 1px solid #f5f5f5;

          &:last-child {
            border-bottom: none;
          }

          .rank-number {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            font-size: 12px;

            &.top {
              background-color: #ffecb3;
              color: #ff9800;
            }
          }

          .rank-content {
            flex: 1;

            .rank-title {
              font-size: 14px;
              margin-bottom: 4px;
            }

            .rank-desc {
              font-size: 12px;
              color: #969799;
            }
          }

          .rank-value {
            font-size: 14px;
            font-weight: 600;
            color: #ee0a24;
          }
        }
      }
    }
  }
}
</style>